<template>
  <div class="con">
    <div class="top">
      <div class="left">
        <p class="titleQuality" >检查累计</p>
      </div>
      <div class="right">
        <div id="qualityEchartsPie" class="echartsPie"></div>
      </div>
      <div class="numberBox">
        <div class="list">50项</div>
        <div class="list">50项</div>
        <div class="list">50项</div>
      </div>
    </div>
    <div class="bottom">
        
      <div id="qualityEchartsLine" class="echartsLine"></div>
    </div>
  </div>
</template>

<script>
export default {
  name:'homeArea8',
  data() {
    return {
      optionPie: {
        title: {
          //   show: true,
          text: "整改率",
          textStyle: {
            color: "#0054bb",
          },
          left: "41%",
          top: "41%",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          right: "5%",
          top: "center",
          orient: "vertical",
          icon: "circle",
          textStyle: {
            color: "#ccc",
          },
        },
        series: [
          {
            name: "电箱",
            type: "pie",
            radius: ["100%", "80%"],
            avoidLabelOverlap: false,
            left: "-165px",
            label: {
              show: false,
              position: "center",
              color: "#ccc",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: "normal",
                // color:'#ccc'
              },
            },
            labelLine: {
              show: true,
            },
            data: [
              { value: 1048, name: "待验证"},
              { value: 735, name: "待整改" },
              { value: 580, name: "已整改" },
            ],
          },
        ],
      },
      optionLine: {
        color: ["#80FFA5", "#00DDFF", "#37A2FF"],
        title: {
          text: "问题趋势",
          textStyle:{
            color:'#ccc',
            fontWeight:'normal',
            fontSize:'16px',
            fontFamily:'Microsoft YaHei'
          },

        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["Line 1", "Line 2", "Line 3"],
          top:'25px',
          icon: "circle",
          textStyle: {
            color: "#ccc",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Line 1",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: "yellowgreen", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "hotpink", // 100% 处的颜色
                },
              ],
            },
            emphasis: {
              focus: "series",
            },
            data: [14, 23, 10, 26, 9, 34, 25],
          },
          {
            name: "Line 2",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color:'rgb(0, 221, 255)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgb(77, 119, 255)', // 100% 处的颜色
                },
              ],
            },
            emphasis: {
              focus: "series",
            },
            data: [12, 28, 11, 23, 22, 34, 31],
          },
          {
            name: "Line 3",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color:'rgb(1, 191, 236)', // 100% 处的颜色
                },
              ],
            },
            emphasis: {
              focus: "series",
            },
            data: [32, 13, 20, 33, 19, 13, 22],
          },
        ],
      },
    };
  },
  methods: {
    mountedHandler() {
      
    },
  },
  mounted() {
    setTimeout(() => {
        const myChartsPie = this.$echarts.init(
        document.getElementById("qualityEchartsPie")
      );
      myChartsPie.setOption(this.optionPie);
      const myChartsLine = this.$echarts.init(
        document.getElementById("qualityEchartsLine")
      );
      myChartsLine.setOption(this.optionLine);
    }, 500);
  },
};
</script>

<style lang="scss" scoped>
.con {
  width: 450px;
  height: 275px;
  box-sizing: border-box;
  padding-left: 15px;
  .top {
    display: flex;
    .left {
      width: 80px;
      .titleQuality{
        font-size:17px;
        color:rgb(187, 187, 187);
        margin-left: 4px;
      }
    }

    .right {
      width: 340px;
      height: 90px;
      .echartsPie {
        width: 300px;
        height: 100px;
      }
    }
    .numberBox {
      width: 50px;
      font-size: 12px;
      padding-top: 7px;
      .list {
        margin-top: 9px;
        color: #006ddb;
      }
    }
  }
  .bottom {
    .echartsLine {
      width: 380px;
      height: 165px;
    }
  }
}
</style>